import React, { Component } from 'react'
import PubSub from 'pubsub-js'
import axios from 'axios';
export default class Server extends Component {
    seachInter= async()=>{
        
        //获取用户的搜索词，这个时候绑定对象不在我们作用的本身上，就容易拿不到，这样我放一个节点才可以拿到.利用ref
            // console.log(this.keyWordEle.value);
            //连续解构赋值 const  {keyWordEle:{value}}=this;
            //连续结构赋值并且改名 const {keyWordEle:{value:data}}=this;
            const {value}=this.keyWordEle;
            //发送请求前通知list更新状态
            // this.props.upDateArr({isFrist:false,isLoading:true});
            //反馈发布消息（消息定位与发布技术）
            PubSub.publish('atguigu',{isFrist:false,isLoading:true})
            //发送网络请求 ----axios
            // #region
        // axios.get(`http://localhost:3000/api1/search/users?q=${value}`).then(res=>{
            // console.log('成功了',res.data);
            // 数据请求回来后，关闭loading
            // this.props.upDateArr({isLoading:false,users:res.data.items});
            // PubSub.publish('atguigu',{isLoading:false,users:res.data.items})
        // },err=>{
            //数据请求失败，关闭loading
        //     this.props.upDateArr({isLoading:false,err:'请求出错了'});
                // PubSub.publish('atguigu',{isLoading:false,err:'请求出错了'})
        //     console.log('成功了',err);
        // })
        // #endregion
                //利用fetch发送网络请求（普通版）
                // fetch(`http://localhost:3000/api1/search/users?q=${value}`).then(
                //     res=>{
                //         console.log('服务器联系上了',res)
                //         return res.json();
                //     },
                    // // err=>{
                    // //     console.log('服务器联系不上了失败了',err.message);
                    // //     //初始化的实例
                    // //     return new Promise(()=>{

                    // //     }
                    //     )
                    // }
                // ).then(res=>{
                //     console.log('获取数据成功',res);
                // },
                // err=>{
                //     console.log('获取数据失败',err); 
                // }
                // ).catch(err=>{console.log(err)})//统一处理错误的消息
            //发送网络请求使用fetch(优化)
            try{
                const response= await fetch(`http://localhost:3000/api1/search/users?q=${value}`)//等数据请求回来的结果
            const data=await response.json();//请求回来的结果还是以一个promise,所以需要再一次await
            PubSub.publish('atguigu',{isLoading:false,users:data.items})
            }catch(err){
                    console.log('请求出错了',err)
                    PubSub.publish('atguigu',{isLoading:false,err:'请求出错了'})
            }
    }
    render() {
        
        return (
            <div>
                <section className="jumbotron">
                <h3 className="jumbotron-heading">搜索githup客户</h3>
                <div>
                <input ref={c=>{this.keyWordEle=c}} type="text" placeholder="enter the name you search" />
                &nbsp;<button onClick={this.seachInter}>搜索</button>
                </div>
            </section>
            </div>
        )
    }
}
